<!-- 模板 -->
<template>
    <div class="pop" v-show="show">
        <transition :name="maskerTransition">
            <div class="pop__masker" v-show="isComponentShow"></div>
        </transition>
        <div class="pop__inner">
            <transition :name="dialogTransition" v-on:after-leave="afterLeave">
                <div class="pop__inner__dialog" v-show='isComponentShow'>
                    <div class="pop__inner__dialog__content">
                        <h1><label>活动规则</label></h1>
                        <p>1.活动对象：参与用户必须持有有效的、完全的(非临时的)驾驶执照（国际驾照暂不支持）；</p>
                        <p>2.活动时间：{{ time }}进行秒杀活动，成功秒杀的用户获得当周周六、周日两天的车辆使用权，使用时间为活动当周周六上午9点至周日21点范围内；</p>
                        <p>3.参加方法：点击下方【立即参与】或【GO参加】按钮，即可参与秒杀；</p>
                        <p>4.注意事项：</p>
                        <p>1）秒杀车辆使用地必须与该车所在城市一致；</p>
                        <p>2）秒杀结果公布后，客服会与中奖者联系后续订单事宜，当天18点前需完成订单支付，否则视为用户主动放弃；</p>
                        <p>3）秒杀价格为车辆租金，不包含保险，押金以实际车价对应押金金额为准；</p>
                        <p>4）为了让更多用户享受秒杀福利，每位秒杀中奖用户30天内重复中奖无效；</p>
                        <p>5）本公司员工及直系亲属不得参与秒杀活动，否则作无效订单处理；</p>
                        <p>5.活动最终解释权归共颖信息科技（上海）有限公司所有；</p>
                    </div>
                    <x-button :text='"知道了"' :type='"primary"' @on-click="onHide"></x-button>
                </div>
            </transition>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import xButton from "../../components/x-button";

    export default{
       data(){
            return{
                show: !1,
                isComponentShow: !1,
                maskerTransition: "aui-pop-masker",
                dialogTransition: "aui-pop"
            }
        },
        props: {
            isShow: {
                type: Boolean,
                default: !1
            },
            time: ''
        },
        watch: {
            isShow(){
                if(!this.isShow){
                    return;
                }
                this.show = 1;

                setTimeout(() => {
                    this.isComponentShow = !0;
                }, 10);
            }
        },
        components:{
            xButton
        },
        methods: {
            onHide() {
                this.isComponentShow = !1;
            },
            // 点击确认按钮之后，可能会存在回调事件
            afterLeave(){
                this.show = !1;
                // 回调
                this.$emit('on-cb');
            }
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../../styles/views/pop.scss";
   .pop__inner__dialog{
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: #fff;
        @include flexbox;
        @include flexboxVertical;
        padding: 0.8rem;
        &__content{
            @include flexAuto;
            -webkit-overflow-scrolling: touch;
            overflow: auto;
            padding-bottom: 0.2rem;
            >h1{
                font-size: 0.5rem;
                position: relative;
                text-align: center;
                line-height: 0.7rem;
                font-weight: bold;
                @include flexbox;
                @include flexCenterHori;
                @include flexCenterVeri;
                padding-bottom: 0.3rem;
                label{
                    padding: 0 0.25rem;
                }
                &:before{
                    width: 1.5rem;
                    height: 0.04rem;
                    content: "";
                    background: url("../../assets/images/line_rule_shadow.png") 0 0 no-repeat;
                    background-size: 1.5rem 0.04rem;
                }
                &:after{
                    width: 1.5rem;
                    height: 0.04rem;
                    content: "";
                    background: url("../../assets/images/line_rule_shadow.png") 100% 0 no-repeat;
                    background-size: 1.5rem 0.04rem;
                    transform: rotate(180deg);
                    margin-top: 2px;
                }
            }
            p{
                padding-left: 0.2rem;
                line-height: 0.36rem;
                color: #fff;
                font-size: 0.26rem;
                position: relative;
                margin-bottom: 0.1rem;
                text-align: justify;
                &:after{
                    width: 0.12rem;
                    height: 0.12rem;
                    position: absolute;
                    top: 0.1rem;
                    left: 0;
                    content: '';
                    border-radius: 50%;
                    background-color: #fff;
                }
            }
        }
    }

    .aui-btn--primary{
        margin-top: 0.2rem;
    }
</style>
